<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素</title>
</head>
<body>
    <script>
        //创建一个元素p
        var p = document.createElement('p')
        //写入文本到p元素
        p.innerText='hello world 通过f12查看'  
        //将p元素挂载到body元素中
        document.querySelector('body').appendChild(p);
        var d = document.createElement('div')
        d.innerText='hello world'
        d.style.width='200px'
        d.style.height='200px'
        d.style.backgroundColor='red'
        d.style.color='white'
        //追加文本元素你好世界
        var str =document.createTextNode('你好世界')
        d.appendChild(str);
        document.querySelector('body').appendChild(d);

        var ul =document.createElement('ul')
        var li1 =document.createElement('li')
        var li2 =document.createElement('li')
        var coffe =document.createTextNode('咖啡')
        li1.appendChild(coffe)
        ul.appendChild(li1)
        li2.innerText='汽水'
        
        //在咖啡之前插入酱油 找到咖啡 父级元素调用insertbefore(new,old)
        var li3 =document.createElement('li')
        
        var jy =document.createTextNode('酱油')
        li3.appendChild(jy)
        ul.appendChild(li3)
        ul.insertBefore(li3,li1)
        //将酱油替换成罐头 父级元素调用replaceChild(new,old)

        var li4 = document.createElement('li')
        var gt =document.createTextNode('罐头')
        li4.appendChild(gt)
        ul.replaceChild(li4,li3)

        //移除汽水元素
        //父级元素.remove(element)
        ul.remove(li2)

        document.querySelector('body').appendChild(ul);
        // document.querySelector('body').appendChild(li1);
        // document.querySelector('body').appendChild(li2);
        // document.querySelector('body').appendChild(li3);

        </script>
</body>
</html>